<template>
  <div class="box" :class="className">
    <div v-html="css"></div>
    <div class="agentShop" v-if="infoData">
      <!-- style -->
      <div class="imgBox">
        <img :src="infoData.avatar_image" alt="" />
      </div>
      <div class="centenBox">
        <div class="sotreName">{{ infoData.shop_name }}</div>
        <div class="desc">{{ infoData.shop_desc }}</div>
      </div>
      <div class="generalization" @click="getPoster">{{ datas.button_title }}</div>
    </div>
    <yz_goodsPoster v-model="posterShow" :defaultImg="defaultImg"></yz_goodsPoster>
  </div>
</template>
<script>
import yz_goodsPoster from "components/ui_components/yz_goodsPoster";
// 自定义样式
const css = function() {
  // 确保数据已传入
  const { btn_border_color, btn_color, btn_radius, button_title, logo_radius, preview_color, shop_desc_color, shop_desc_size, shop_name_color, shop_name_size } = this.datas;

  return `
      .component-${this.id} .agentShop {
        background-color: ${preview_color.color};
        background-image: url(${preview_color.isColor == "2" ? preview_color.image : ""});
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .component-${this.id} .sotreName{
        font-size:${shop_name_size}px;
        color:${shop_name_color}px;
      }
      .component-${this.id} .desc{
        font-size:${shop_desc_size}px;
        color:${shop_desc_color};
      }
      .component-${this.id} .imgBox img{
        border-radius:${logo_radius}px;
      }
      .component-${this.id} .imgBox{
        border-radius:${logo_radius}px;
      }
      .component-${this.id} .generalization{
        color:${btn_color};
        border: 0.03rem solid ${btn_border_color};
        border-radius: ${btn_radius}px;
      }
  `;
};
export default {
  props: ["id", "datas", "tabcontrol", "lastIndex", "index", "plugin_active", "isBottom"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  data() {
    return {
      infoData: null,
      posterShow: false,
      defaultImg: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getPoster() {
      let { data, msg, result } = await $http.post("plugin.agent-shop.frontend.agent.getPoster", { id: this.infoData.id }, "");
      if (!result) return this.$toast(msg);
      this.defaultImg = data.url;
      this.posterShow = true;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.agent-shop.frontend.agent.index", {}, "");
      if(result){
        this.infoData = data;
      }
    }
  },
  components: { yz_goodsPoster }
};
</script>
<style lang="scss" scoped>
.agentShop {
  padding: 0.63rem 0.75rem 0.75rem 0.75rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .generalization {
    font-weight: 400;
    font-size: 0.81rem;
    width: 4.56rem;
    height: 1.88rem;
    line-height: 1.88rem;
    text-align: center;
  }
  .imgBox {
    width: 3rem;
    height: 3rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .centenBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 0.5rem;
    .sotreName {
      font-weight: bold;
    }
  }
}
</style>
